<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    <title>{{ system_name|trans }} {{ version|raw|default('3.0.0') }}</title>
    {% block stylesheet %}
        {% stylesheets
        'bundles/icsocui/css/bootstrap.min.css'
        'bundles/icsocui/css/font-awesome.min.css'
        'bundles/icsocui/css/ace-fonts.css'
        'bundles/icsocui/css/ace-skins.min.css'
        filter="cssrewrite"
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}

    {% block stylesheet_footer %}
        {% stylesheets
        'bundles/icsocui/css/ace.min.css'
        filter="cssrewrite"
        %}
        <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %}

    {%  block head_script %}
        {% javascripts
        'bundles/icsocui/js/ace-extra.min.js'
        filter='uglifyjs'
        %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% endblock %}

    {% block statistic_script %}
        <script>
            var _hmt = _hmt || [];
            (function() {
                var hm = document.createElement("script");
                hm.src = "//hm.baidu.com/hm.js?{{ baidu_statistic_sitecode }}";
                var s = document.getElementsByTagName("script")[0];
                s.parentNode.insertBefore(hm, s);
            })();
        </script>
    {% endblock %}
</head>
<body class="login-layout blur-login">

<div class="main-container">
<div class="main-content">
<div class="row"><div class="space-12"></div></div>
<div class="row"><div class="space-12"></div></div>
<div class="row"><div class="space-12"></div></div>
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<div class="login-container">
<div class="center">
    <h1>
        <i class="ace-icon fa fa-leaf green"></i>
        <span class="red">Easy</span>
        <span class="white" id="id-text2">Manage</span>
    </h1>
    <h4 class="blue" id="id-company-text">{{ system_name|trans }} {{ version|raw|default('3.0.0') }}</h4>
</div>

<div class="space-6"></div>

<div class="position-relative">
    <div id="login-box" class="login-box visible widget-box no-border">
        <div class="widget-body">
            <div class="widget-main">
                <h4 class="header blue lighter bigger">
                    <i class="ace-icon fa fa-coffee green"></i>
                    {{ 'Please Enter Your Information'|trans }}
                </h4>
                <div class="space-6"> </div>
                <div class="alert alert-danger hide" id="error">
                    <strong>
                        <i class="ace-icon fa fa-times"></i>
                        <span id="error_message"></span>
                    </strong>
                    <br>
                </div>
                <form id="validation-form">
                    <fieldset>
                        <label class="block clearfix">
                            <span class="block input-icon input-icon-left">
                                <input id="vcc_code" name="vcc_code" type="text" class="form-control" placeholder="{{ 'Vcccode'|trans }}" />
                                <i class="ace-icon fa fa-laptop"></i>
                            </span>
                        </label>
                        <label class="block clearfix">
                            <span class="block input-icon input-icon-left">
                                <input id="user_name" name="user_name" type="text" class="form-control" placeholder="{{ 'Login name'|trans }}" />
                                <i class="ace-icon fa fa-user"></i>
                            </span>
                        </label>
                        <label class="block clearfix">
                            <span class="block input-icon input-icon-left">
                                <input id="password" name="password" type="password" class="form-control" placeholder="{{ 'Password'|trans }}" />
                                <i class="ace-icon fa fa-lock"></i>
                            </span>
                        </label>
                        <label class="block clearfix ">
                            <span class="block input-icon input-icon-left ">
                                <input id="captcha" name="captcha" type="text" placeholder="{{ 'Captcha'|trans }}" style="width: 150px;"/>
                                <img src="{{ path('gregwar_captcha.generate_captcha', {key:'login'}) }}" id="captcha_img" class="pure-u-1-3" onclick="reload()" >
                                <i class="ace-icon fa fa-lock"></i>
                            </span>
                        </label>
                        <div class="space"></div>

                        <div class="clearfix">
                            <label class="inline">
                                <input id="_remember_me" name="_remember_me" type="checkbox" class="ace" />
                                <span class="lbl"> {{ 'Remember Me'|trans }}</span>
                            </label>

                            <button type="button" class="width-35 pull-right btn btn-sm btn-primary" onclick="sendData()" id="loginBtn">
                                <i class="ace-icon fa fa-key"></i>
                                <span class="bigger-110">{{ 'Login'|trans }}</span>
                            </button>
                        </div>
                        <div class="space-4"></div>
                    </fieldset>
                </form>
            </div><!-- /.widget-main -->

            <div class="toolbar center clearfix">
                <a class="user-signup-link" href="http://www.icsoc.net" target="_blank">
                    <h5>{{ copyright|trans }} &copy; {{ ""|date('Y') }}</h5>
                </a>
            </div>
        </div><!-- /.widget-body -->
    </div><!-- /.login-box -->
</div><!-- /.position-relative -->

<div class="navbar-fixed-top align-right">
    <br />
    &nbsp;
    <a id="btn-login-dark" href="#">{{ 'Dark'|trans }}</a>
    &nbsp;
    <span class="blue">/</span>
    &nbsp;
    <a id="btn-login-blur" href="#">{{ 'Blur'|trans }}</a>
    &nbsp;
    <span class="blue">/</span>
    &nbsp;
    <a id="btn-login-light" href="#">{{ 'Light'|trans }}</a>
    &nbsp; &nbsp; &nbsp;
</div>
</div>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.main-content -->
</div>
    <!-- list of script files -->
    {% block javascript %}
        <!--[if !IE]> -->
        <script src="{{ asset('bundles/icsocui/js/jquery.min.js') }}"></script>
        <!-- <![endif]-->
        <!--[if lte IE 9]>
        <script src="{{ asset('bundles/icsocui/js/jquery-1.11.1.min.js') }}"></script>
        <![endif]-->
        {% javascripts
        'bundles/icsocui/js/bootstrap.min.js'
        %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% endblock %}

    {# 始终保持在最下面的javascript文件 #}
    {% block javascript_footer %}
        {% javascripts
        'bundles/icsocui/js/ace-elements.min.js'
        'bundles/icsocui/js/ace.min.js'
        '@jqvalidate_js'
        filter='uglifyjs'
        %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
        <script type="application/javascript">
            $(document).ready(function() {
                $('body').keydown(function(event){
                    if(event.keyCode == 13){
                        sendData();
                    }
                });
            });
            jQuery(function($) {
                $('#btn-login-dark').on('click', function(e) {
                    $('body').attr('class', 'login-layout');
                    $('#id-text2').attr('class', 'white');
                    $('#id-company-text').attr('class', 'blue');
                    e.preventDefault();
                });
                $('#btn-login-light').on('click', function(e) {
                    $('body').attr('class', 'login-layout light-login');
                    $('#id-text2').attr('class', 'grey');
                    $('#id-company-text').attr('class', 'blue');
                    e.preventDefault();
                });
                $('#btn-login-blur').on('click', function(e) {
                    $('body').attr('class', 'login-layout blur-login');
                    $('#id-text2').attr('class', 'white');
                           });
            });
           function sendData()
           {
               if (!$('#validation-form').valid()) {
                    return false;
               }
               var _user_name = $('#user_name').val();
               var _password = $('#password').val();
               var ccode = $('#vcc_code').val();
               var captcha = $('#captcha').val();
               var _remember_me = $('#_remember_me').is(":checked") ? true : false;
               var remember = _remember_me ? '&_remember_me=1' : '';
               $('#loginBtn').attr('disabled', true);
               $.ajax({
                   type:'POST',
                   url: "{{ path('icsoc_security_check_login') }}",
                   data:"_username="+ccode+"&_password="+_password+'&captcha='+captcha+'&admin_user='+_user_name+remember,
                   dataType:"json",
                   success: function(responce) {
                        if (responce.error) {
                            $('#error').attr("class","alert alert-danger");
                            $('#error_message').text(responce.message);
                            $('#loginBtn').attr('disabled', false);
                            reload();
                        } else {
                            window.parent.location.href = responce.target_path;
                        }
                   }
               });
           }
           $('#validation-form').validate({
                errorElement: 'div',
                errorClass: 'help-block',
                focusInvalid: false,
                showErrors: function(errorMap, errorList) {
                   this.defaultShowErrors();
                   for (var i=0; i<errorList.length;i++) {
                       $(errorList[i].element).removeClass('help-block');
                       $(errorList[i].element).parent().parent().attr('class', 'block clearfix form-group has-error');
                   }
                },
                success: function(lable) {
                   $(lable.parent().parent()).attr('class', 'block clearfix');
                },
                rules: {
                    vcc_code: 'required',
                    user_name: "required",
                    password: "required"
                },
                messages: {
                    vcc_code: "{{ 'Vcccode is not empty'|trans  }}",
                    user_name: "{{ 'username is not empty'|trans  }}",
                    password: "{{ 'password is not empty'|trans  }}"
                }
            })
            function reload () {
                var img = document.getElementById('captcha_img');
                img.src = '{{ path('gregwar_captcha.generate_captcha', {key:'login'}) }}?n=' + (new Date()).getTime();
            }
        </script>
    {% endblock %}
    {% block footer %}
    {% endblock %}
</body>
</html>
